<template>
  <div class="page-display">
    <div class="display-wrapper">
      <section class="mofang-demo">
        <iframe :src="ifrSrc" frameborder="0" width="100%" height="100%"></iframe>
      </section>
    </div>
  </div>
</template>
<style lang="scss" >
.page-display {
  position: relative;
  .display-wrapper {
    position: absolute;
    width: 348px;
    height: 756px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('http://ooqjmhjnl.bkt.clouddn.com/phone.png') no-repeat;
    background-size: cover;
    .mofang-demo {
      position: absolute;
      top: 104px;
      left: 14px;
      right: 14px;
      height: 550px;
      border-radius: 4px;
      background-color: white;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      hash: '/'
    }
  },
  computed: {
    ifrSrc() {
      return `http://emeker.gitee.io/mk-ui/docs/example/index.html#/`
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        const index = to.path.indexOf('/docs/')
        this.hash = to.path.substr(index + 6)
      },
      immediate: true
    }
  }
}
</script>
